<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>订单管理</title>
  <link rel="stylesheet" href="../css/dindanguanli.css">
  <link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
  <script src="../lib/bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
  <script src="../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="../css/caidanlan.css">
  <link rel="stylesheet" href="../font/iconfont.css">
  <script src="../javaScript/quanxianpanduan.js"></script>
  <script src="../javaScript/utl.js"></script>
  <script src="../javaScript/data_management.js"></script>
</head>

<body>
  <div class="container-fulid">
    <div class="row shouhang">
      <span class="iconfont icon-ziliaoku"></span>
      <p>图书馆后台管理系统</p>
      <div id='yonghu'>
      </div>
    </div>
    <div class="row">
      <div class="col-md-2 caidan">
        <a href="../html/jueseguanli.html">
          <p> 角色管理</p>
        </a>
        <a href="../html/guanliyuanguanli.html">
          <p>管理员管理</p>
        </a>
        <a href="./quanxianguanli.html">
          <p>权限管理</p>
        </a>
        <a href="../html/ReaderUser.html">
          <p>读者用户</p>
        </a>
        <a href="../html/duzhejuese.html">
          <p>读者角色</p>
        </a>
        <a href="../html/yuedu.html">
          <p>借阅查询</p>
        </a>
        <a href="../html/jieyueguanli.html">
          <p>借阅管理</p>
        </a>
        <a href="../html/book-management.html">
          <p>书刊管理</p>
        </a>
        <a href="../html/guancangdizhi.html">
          <p>馆藏地址管理</p>
        </a>
        <a href="../html/guancangfenlei.html">
          <p>馆藏分类管理</p>
        </a>
        <a href="../html/cengjiaLabel.html">
          <p>层架标签配置</p>
        </a>
        <a href="../html/fenguanshezhi.html">
          <p>分馆配置</p>
        </a>
        <a href="../html/book_inventory.html">
          <p>图书盘点</p>
        </a>
        <a href="../html/dindanguanli.html">
          <p>订单管理</p>
        </a>
        <a href="../html/tushuguanshezi.html">
          <p>图书馆设置</p>
        </a>
      </div>
      <div class="col-md-10" style="padding-top: 100px;">
        <div class="col-md-2"><button class="btn btn-primary piliang" style="height: 35px;width: 70px;padding: 0;"
            data-toggle="modal" data-target="#myModal3">批量删除</button>
        </div>
        <div class="col-md-2"></div>
        <div class="col-md-8" style="padding-bottom: 50px;">
          订单管理：<select name="" id="guanli"
            style="border: 1px black solid;height: 35px;width: 100px; margin-right: 25px;">
            <option value="全部">全部</option>
            <option value="进行中">进行中</option>
            <option value="已完成">已完成</option>
            <option value="已取消">已取消</option>
            <option value="已结算">已结算</option>
          </select> 支付状态：
          <select name="" id="zhuangtai" style="border: 1px black solid;height: 35px;width: 100px;margin-right: 25px;">
            <option value="全部">全部</option>
            <option value="未付款">未付款</option>
            <option value="线下付款">线下付款</option>
            <option value="线上付款">线上付款</option>
            <option value="退款">退款</option>
          </select>

          <input type="text" placeholder="卡号\身份证号" id="Text" style="height: 35px;width: 180px;border: 1px black solid;">
          <button id="select" class="btn btn-primary" style="height: 35px;width: 60px;padding: 0;">查询</button>
          <button id="selectSFZ" class="btn btn-primary" style="height: 35px;width: 100px;padding: 0;">读身份证</button>
          <button id="selectKH" class="btn btn-primary" style="height: 35px;width: 60px;padding: 0;">读卡号</button>
        </div>
        <div style="height: 630px;">
          <table id="mytable">
            <thead>
              <tr style="background-color: rgb(209, 248, 248); height: 50px;">
                <th style="width: 2% ;text-align: center;">
                  <input id="checkALL" type="checkbox">
                </th>
                <th style="width: 4%;text-align: center;">订单号</th>
                <th style="width: 4%;text-align: center;">卡号</th>
                <th style="width: 4%;text-align: center;">姓名</th>
                <th style="width: 8%;text-align: center;">身份证</th>
                <th style="width: 4%;text-align: center;">订单状态</th>
                <th style="width: 4%;text-align: center;">支付状态</th>
                <th style="width: 4%;text-align: center;">付款金额</th>
                <th style="width: 5%;text-align: center;">商品最终金额</th>
                <th style="width: 4%;text-align: center;">创建时间</th>
                <th style="width: 6%;text-align: center;">操作</th>

              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>
        <div id="mydiv" class="col-md-6">
          <div onclick="prePage()"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span></div>
          <div id="pages"></div>
          <div onclick="nextPage()"><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></div>
        </div>
        <div id="tiaozhuan" class="col-md-6">
          <button class="btn btn-primary" style="height: 35px;width: 60px;padding: 0;">跳转到</button>第<input type="text"
            name="" id="" style="height: 30px; width: 30px;">页
        </div>
      </div>
    </div>
    <!-- 删除模态框 -->
    <div class="modal fade" id="myModal" tabindex="-1">
      <div class="modal-dialog">
        <!-- 模块会话 -->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true"> ×</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">提示</h4>
          </div>
          <div class="modal-body">
            <p style="text-align: center;">是否删除该订单</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" id="del">确定</button>
          </div>
        </div>
        <!-- /.model-content -->
      </div>
      <!-- /.model-dialog -->
    </div>
    <!-- /.modal -->

    <!-- 修改模态框 -->
    <div class="modal fade" id="myModal1" tabindex="-1">
      <div class="modal-dialog">
        <!-- 模块会话 -->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true"> ×</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">修改</h4>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label for="recipient-name" class="control-label">订单号:</label>
                <input type="text" class="form-control" id="recipient-ON">
              </div>
              <div class="form-group">
                <label for="message-text" class="control-label">卡号:</label>
                <input type="text" class="form-control" id="recipient-CN">
              </div>
              <div class="form-group">
                <label for="message-text" class="control-label">姓名:</label>
                <input type="text" class="form-control" id="recipient-name">
              </div>
              <div class="form-group">
                <label for="message-text" class="control-label">身份证:</label>
                <input type="text" class="form-control" id="recipient-ID">
              </div>


              <div class="form-group">
                <label for="message-text" class="control-label">订单状态:</label>
                <select class="form-control" id="recipient-OS">
                  <option value="全部">全部</option>
                  <option value="进行中">进行中</option>
                  <option value="已完成">已完成</option>
                  <option value="已取消">已取消</option>
                  <option value="已结算">已结算</option>
                </select>

              </div>
              <div class="form-group">
                <label for="message-text" class="control-label">支付状态:</label>
                <select name="" class="form-control" id="recipient-PS">
                  <option value="全部">全部</option>
                  <option value="未付款">未付款</option>
                  <option value="线下付款">线下付款</option>
                  <option value="线上付款">线上付款</option>
                  <option value="退款">退款</option>
                </select>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" id="xiugai">确定</button>
          </div>
        </div>
        <!-- /.model-content -->
      </div>
      <!-- /.model-dialog -->
    </div>
    <!-- /.modal -->

    <!-- 批量删除模态框 -->
    <div class="modal fade" id="myModal3" tabindex="-1">
      <div class="modal-dialog">
        <!-- 模块会话 -->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true"> ×</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">提示</h4>
          </div>
          <div class="modal-body">
            <p style="text-align: center;">是否删除该页订单</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" id="del">确定</button>
          </div>
        </div>
        <!-- /.model-content -->
      </div>
      <!-- /.model-dialog -->
    </div>
    <!-- /.modal -->
</body>
<script>
  isLogin()
  yonghu()
  let guanliname = glqx('订单管理')

  let dindanData = JSON.parse(getData('dingdan'))
  let selectData = dindanData
  let maxPage
  let muqian = 1

  //渲染表格
  function showTable(data) {
    $('#mytable tbody').html('')
    $.each(data, (index, item) => {
      $('#mytable tbody').append(`
          <tr>
            <td><input type="checkbox" class="check" name="ck"></td>
            <td>${item.ON}</td>
            <td>${item.CN}</td>
            <td>${item.name}</td>  
            <td>${item.ID}</td>  
            <td>${item.OS}</td>  
            <td>${item.PS}</td>  
            <td>${item.PA}</td>  
            <td>${item.FA}</td>  
            <td>${item.Ctime}</td>  
            <td> 
              <button type="button" class="btn btn-primary11 btn-lg" data-toggle="modal" data-target="#myModal1" onclick="xiugai(this)" >
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 17 17" style="padding-top:3px">
              <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
              <path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/>
            </svg>
              </button> 
              <button data-item='${JSON.stringify(item)}'  type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" onclick="san(this)">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-trash-fill"  viewBox="0 0 17 17" style="padding-top:3px">
                  <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/>
                </svg> </button>    
            </td>  
          </tr>
        `)
    })
  }

  //分页
  function fenye(num, data) {
    let qishi = (num - 1) * 10
    let arr = data.slice(qishi, qishi + 10)
    showTable(arr)
    $("#mytable tbody td").css({ textAlign: 'center', paddingTop: '10px', fontSize: '15px' })
    $("#mytable tbody button").css({ padding: '0px', fontSize: '20px', width: '50px', height: '25px' })
    $("#mytable tbody button:first-child").css({ backgroundColor: 'red' })
  }

  //页码 
  function showPage(data) {
    $('#pages').html('')
    maxPage = Math.ceil(data.length / 10)
    for (let i = 1; i <= maxPage; i++) {
      $('#pages').append(
        `<div data-page='${i}' class="page">${i}</div>`
      )
    }
  }
  juzhong(1)

  //页码跳转
  $('#pages').on('click', '.page', function (e) {
    let num = parseInt($(this).attr('data-page'))
    muqian = num
    fenye(num, selectData)
  })

  //上一页
  function prePage() {
    if (muqian != 1) {
      let page = muqian - 1
      muqian = page
      fenye(page, selectData)
    }
  }

  // 下一页
  function nextPage() {
    if (muqian < maxPage) {
      let page = muqian + 1
      muqian = page
      fenye(page, selectData)
    }
  }

  //调用渲染表格 分页的方法
  function juzhong() {
    showPage(selectData)
    fenye(1, selectData)
  }

  //跳转
  $('#tiaozhuan button').click(function () {
    let num = parseInt($('#tiaozhuan input')[0].value)
    if (num >= 1 && num <= maxPage) {
      muqian = num
      fenye(num, selectData)
    } else {
      alert('请输入正确的页码')
    }
    $('#tiaozhuan input').val('')
  })

  //删除
  function san(date) {
    if (czqx(guanliname, '删除')) {
      return
    }
    $('#myModal').on('click', '#del', function () {
      let sanchudata = $(date).parent().parent().find('td:nth-child(2)').text()
      for (let i = 0; i < dindanData.length; i++) {
        if (sanchudata == dindanData[i].ON) {
          dindanData.splice(i, 1)
          break;
        }
      }
      $('#myModal').modal('hide')
      juzhong()
    })
    setData('dingdan', dindanData)
  }

  //修改
  function xiugai(data) {
    if (czqx(guanliname, '编辑')) {
      return
    }

    //设置不可修改项
    $('#recipient-ON').val($(data).parent().parent().find('td:nth-child(2)').text())
    //只读，不可修改
    $('#recipient-ON').attr("readOnly", true);

    console.log($(data).parent().parent().find('td:nth-child(2)').text());
    $('#myModal1').on('click', '#xiugai', function () {
      let newON = $('#recipient-ON').val()
      let newCN = $('#recipient-CN').val()
      let newname = $('#recipient-name').val()
      let newID = $('#recipient-ID').val()
      let newOS = $('#recipient-OS').val()
      let newPS = $('#recipient-PS').val()
      for (let i = 0; i < dindanData.length; i++) {
        if (dindanData[i].ON == newON) {
          dindanData[i].CN = newCN
          dindanData[i].name = newname
          dindanData[i].ID = newID
          dindanData[i].OS = newOS
          dindanData[i].PS = newPS
          juzhong()
          $('#myModal1').modal('hide')
          alert('修改成功')
          qinchu()
          break
        }
      }
    })
  }


  //清空模态框
  function qinchu() {
    $('#recipient-ON').val('')
    $('#recipient-CN').val('')
    $('#recipient-name').val('')
    $('#recipient-ID').val('')
  }


  //查询
  //多条件查询
  $('#select').click(function () {
    if (czqx(guanliname, '查询')) {
      return
    }
    let data = dindanData.filter(item => item.OS == $('#guanli').val())
    let data1 = dindanData.filter(item => item.PS == $('#zhuangtai').val())
    let data2 = dindanData.filter(item => item.OS == $('#guanli').val() && item.PS == $('#zhuangtai').val())
    if ($('#guanli').val() != '全部' && $('#zhuangtai').val() == '全部') {
      selectData = data
      juzhong()
    } else if ($('#guanli').val() == '全部' && $('#zhuangtai').val() != '全部') {
      selectData = data1
      juzhong()
    } else if ($('#guanli').val() != '全部' && $('#zhuangtai').val() != '全部') {
      selectData = data2
      juzhong()
    } else {
      selectData = dindanData
      juzhong()
    }
  })
  //身份证查询
  $('#selectSFZ').click(function () {
    if (czqx(guanliname, '查询')) {
      return
    }
    let data3 = dindanData.filter(item => item.ID == $('#Text')[0].value)
    selectData = data3
    juzhong()
  })
  //卡号查询
  $('#selectKH').click(function () {
    let data4 = dindanData.filter(item => item.CN == $('#Text')[0].value)
    selectData = data4
    juzhong()
  })
  //批量选择
  let state = false
  $('#checkALL').click(function () {
    if (!state) {
      $('.check').prop('checked', true)
      state = true
    } else {
      $('.check').prop('checked', false)
      state = false
    }
  })
  //批量删除
  $('.piliang').click(function () {
    $('#myModal3').on('click', '#del', function () {
      var ck = $("input:checked[name='ck']")
      for (var i = 0; i < ck.length; i++) {
        for (let j = 0; j < dindanData.length; j++) {
          if (dindanData[j].ON == ck.eq(i).parent().next().text()) {
            dindanData.splice(j, 1)
            break;
          }
        }
      }
      $('#myModal3').modal('hide')
      console.log(dindanData)
      setData('dingdan', JSON.stringify(dindanData))
      juzhong()
      state = false
      $('#checkALL').prop('checked', false)
    })

  })
</script>

</html>